<template>
  <div class="container">
    <el-row class="headers">
      <el-col :span="12">
        <div class="title">传播图谱</div>
      </el-col>
    </el-row>
    <div class="chart-wrap flex ">
      <!-- 传播图谱 -->
      <div
        id="main-chart"
        style="height:600px"
      >
      </div>
      <div class="chart-total-wrap">
        <div class="chart-title">{{total || 0}}</div>
        <div class="chart-count">用户数</div>
      </div>
      <!-- 关联派生排行 -->
      <div class="sort-wrap">
        <div class="sort-title">关联派生排行</div>
        <ul
          class="sort-list infinite-list"
          v-infinite-scroll="load"
          style="overflow:auto"
        >
          <li
            class="sort-item infinite-list-item"
            v-for="(item,index) of sortList"
            :key='index'
          >
            <div class="flex flex-center flex-between">
              <div class="id">{{index + 1}}.</div>
              <div class=" flex-one phone">{{item.phone}}</div>
              <div class="num">{{item.childcount}}</div>
            </div>
            <!-- <div class="progress"></div> -->
            <!-- <el-progress   :percentage="item.progress" :color="customColor"></el-progress> -->
            <el-progress
              :percentage="item.progress"
              :format="format"
            ></el-progress>
          </li>
        </ul>
      </div>
    </div>
    <!-- 传播列表 -->

    <el-card class="spread-wrap">
      <div slot="header">传播列表</div>
      <div class="flex flex-center flex-between">
        <div class="flex flex-center">
          <span
            class="font"
            style="padding:0 10px 0 43px"
          >姓名/手机号:</span>
          <div class="input-wrap">
            <el-input
              v-model.trim="keyword"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="flex flex-center">
            <span
            class="font"
            style="padding:0 10px 0 13px"
          >地区:</span>
            <div class="input-wrap">
              <el-input
                v-model.trim="address"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
          <!-- <el-select
            v-model="model"
            placeholder="请输入"
          >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <el-button
            type="primary"
            style="margin:0 0px 0 13px"
            @click="query"
          >查询</el-button>
        </div>
        
        <el-button
          type="info"
          class="export"
          @click="handleDownloadData"
        >导出</el-button>
        
        

      </div>
      <!-- 表格 -->
      <div class="table-wrap">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{'background-color': '#fafafa'}"
        >
          <el-table-column
            prop="vu_name"
            label="序号"
            width="width"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="vu_name"
            label="用户名"
            width="width"
          >
          </el-table-column>
          <el-table-column
            prop="vu_position_name"
            label="职位"
            width="width"
          >
          </el-table-column>
          <el-table-column
            prop="vu_phone"
            label="手机号"
            width="width"
          >
          </el-table-column>
          <el-table-column
            prop="vu_address"
            label="地区"
            width="width"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="传播层级"
            width="width"
            sortable
          >
            <template slot-scope="scope">暂无</template>
          </el-table-column>
          <el-table-column
            prop="spreadcount"
            label="传播人数"
            width="width"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="最近传播时间"
            width="width"
            sortable
          >
            <template slot-scope="scope">暂无</template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="详情"
            width="width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="checkInfo(scope.row)"
              >查看</el-button>
              <el-dialog
                class="el-dialog-wrap"
                :visible.sync="isShow"
                width="width"
              >
                <div class="title">个人详情</div>
                <div class="contents">
                  <div class="flex ">
                    <img
                      class="avatar"
                      src="../../../assets/image/add-icon2.png"
                      alt=""
                    >
                    <div class="name">{{userInfo.vu_name}}</div>
                  </div>
                  <div class="info-wrap flex ">
                    <div class="flex-one">用户名:{{userInfo.vu_name}}</div>
                    <div class="flex-one">性别: {{userInfo.vu_gender == 1 ? '男' : userInfo.vu_gender == 0 ? '女' : '无'}}</div>
                    <div class="flex-one">部门/职位:{{userInfo.vu_position_name || "无"}} </div>
                    <div class="flex-one">加入时间: 无</div>

                  </div>
                  <div class="info-wrap flex">
                    <div class="flex-one">手机号：{{userInfo.vu_phone}}</div>
                    <div class="flex-one">地区:{{userInfo.vu_address}}</div>
                    <div class="flex-one">传播人数：{{userInfo.spreadcount}}</div>
                    <div class="flex-one">企业微信: 无</div>
                  </div>
                  <div class="title2">关系派生</div>
                  <el-table
                    :data="infoData"
                    border
                    style="width: 100%"
                  >
                    <el-table-column
                      label="序号"
                      width="width"
                    >
                      <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="vu_name"
                      label="用户名"
                      width="width"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="vu_phone"
                      label="手机号"
                      width="width"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="vu_address"
                      label="地区"
                      width="width"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="create_time"
                      label="关联日期"
                      width="width"
                    >
                    </el-table-column>
                  </el-table>
                </div>

              </el-dialog>

            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-content" style="margin-top:10px">
          <el-pagination
              background
              :hide-on-single-page="false"
              :page-size="10"
              :total="tablePageTotal"
              @current-change="changePage"
              layout="prev, pager, next"
            >
            </el-pagination>
        </div>
            
          

      </div>

    </el-card>
  </div>

</template>

<script>
// import { outExportExcel } from '@/utils/index';
import * as echarts from 'echarts'
import {
  getAtlasData,
  queryVisitorSpreadRank,
  queryVisitorPage,
  getSpreadDetail
} from '@/api/visitor'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { parse } from 'url'
import utils from '@/utils/index'
// import {Test} from '@/api/user'
export default {
  name: '',

  data() {
    return {
      total: 0, // 总人数
      isShow: false,
      keyword: null, // 搜索内容
      address: null,   // 搜索地区
      infoData: [], // 弹窗信息
      model: null, // 下拉选中
      tableData: [],
      tablePageNo: 1,
      tablePageTotal: 10,
      customColor: '#409eff',
      userInfo: {}, // 用户信息
      options: [
        {
          label: '上海',
          value: 1100
        }
      ], // 地区下拉框
      sortList: [], // 排行列表
      graph: {},
      
      columns: [
        { ID: 1, title: 'ID', name: '张三' },
        { ID: 1, title: 'ID', name: '张三' },
        { ID: 1, title: 'ID', name: '张三' },
        { ID: 1, title: 'ID', name: '张三' },
        { ID: 1, title: 'ID', name: '张三' },
        { ID: 1, title: 'ID', name: '张三' }
      ],
      dataSource: []

      // 传播列表
    }
  },
  methods: {
    changePage(e) {
      this.getUserList(e)
    },
    load() {
      this.sortPage = 1
    },
    format(percentage) {
      return ''
    },
    // 查询
    query() {
      let params = {
        keyword: this.keyword,
        address: this.address
      }
      queryVisitorPage(params).then(res => {
        this.tableData = res.data.datas
        this.tablePageTotal  = res.data.totalCount
      })
    },
    // 传播列表
    getUserList(params) {
      queryVisitorPage({ pageSize: 10, pageNo: params }).then(res => {
        this.tableData = res.data.datas
        this.tablePageTotal = res.data.totalCount
      })
    },
    // 派生关系排行
    getDerivedList() {
      queryVisitorSpreadRank({}).then(res => {
        this.sortList = res.data
        let max = this.sortList[0].childcount
        this.sortList.map(item => {
          item.progress = Number(((item.childcount / max) * 100).toFixed(0))
        })
      })
    },
    // 导出excel
    handleDownloadData() {
      const excelHeader = {
        用户名: 'vu_name',
        职位: 'vu_position_name',
        手机号: 'vu_phone',
        地区: 'vu_address',
        传播图层: '',
        传播人数: 'spreadcount',
        传播时间: ''
      }
      const tHeader = Object.keys(excelHeader)

      const excelData = this.tableData.map(item => {
        return tHeader.map(v => {
          return item[excelHeader[v]]
        })
      })
      const excelName = '人员信息表'
      export_json_to_excel(tHeader, excelData, excelName)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 查看弹窗信息
    checkInfo(scope) {
      this.isShow = true
      this.userInfo = scope
      console.log(scope)
      getSpreadDetail({ vuUpLevelMuId: scope.visitor_user_id }).then(res => {
        this.infoData = res.data.datas
        this.infoData.map(item => {
          item.create_time = utils.formatDate(item.create_time,'yyyy.MM.dd',true)
        })
      })
    },
    // 排序
    formatter(row, column) {
      return row.address
    },
    initChart() {
      // 获取图谱数据
      getAtlasData({}).then(res => {
        this.graph = res.data
        // this.total = 0
        this.total = this.graph.nodes.length
        this.graph.nodes.forEach(function(node) {
          // this.total += this.total + 1;
          node.label = {
            show: true
          }
        })
        var categories = []
        for (var i = 0; i < 2; i++) {
          categories[i] = {
            name: '类目' + i
          }
        }
        let option = {
          backgroundColor: '#fff',
          tooltip: {},
          series: [
            {
              name: '关系图谱',
              type: 'graph',
              layout: 'force',
              data: this.graph.nodes,
              links: this.graph.links,
              categories: categories,
              roam: true,
              label: {
                show: true,
                position: 'right',
                formatter: '{b}'
              },
              labelLayout: {
                hideOverlap: true
              },
              scaleLimit: {
                min: 0.4,
                max: 2
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        }
        var chartDom = document.getElementById('main-chart')
        var myChart = echarts.init(chartDom)
        // myChart.resize() //自适应大小
        myChart.resize()
        myChart.setOption(option)
      })
    }
  },
  mounted() {
    this.initChart()
    this.getDerivedList()
    this.getUserList()
  }
}
</script>
<style lang="scss">
.headers {
  height: 98px;
  font-size: 20px;
  font-weight: 500;
  border-top: 1px solid #eee;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fff;
  .title {
    padding: 36px 0 0 53px;
    box-sizing: border-box;
  }
}
// 传播图谱
.chart-wrap {
  padding: 30px;
  position: relative;
  .chart-total-wrap {
    position: absolute;
    left: 67px;
    top: 51px;
    .chart-title {
      font-size: 80px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #015dff;
    }
    .chart-count {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-left: 10px;
    }
  }

  #main-chart {
    flex: 1;
  }
}
// 排行
.sort-wrap {
  // overflow: hidden;
  overflow-y: scroll;
  width: 382px;
  height: 600px;
  background: #ffffff;
  border-radius: 2px;
  margin-left: 22px;
  .sort-title {
    padding: 15px 19px;
    border-bottom: 1px solid #e9e9e9;
  }
  .sort-list {
    padding: 24px 68px 51px 48px;
    box-sizing: border-box;

    .sort-item {
      list-style: none;
      margin-bottom: 20px;
      .id {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
      }
      .phone {
        margin-left: 3px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
      }
      .num {
        font-size: 14px;
        font-family: HelveticaNeue;
        color: rgba(0, 0, 0, 0.65);
      }

      .progress {
        width: 265px;
        margin-top: 10px;
      }
    }
  }
}

// 传播列表
.spread-wrap {
  margin: 0 30px 30px 30px;
  .input-wrap {
    width: 272px;
  }
  .table-wrap {
    padding: 0 30px;
    margin-top: 20px;
  }
  .export {
  }
}
.font {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
// 弹窗样式
.el-dialog-wrap {
  .el-dialog {
    box-shadow: 0px 2px 14px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    .el-dialog__header {
      padding: 0;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
    .el-dialog__body {
      padding: 0;
    }
    .dialog-footer {
      margin-top: 10px;

      text-align: center;
    }
    .title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      padding: 16px 22px;
      border-bottom: 1px solid rgba(233, 233, 233, 1);
    }
    .contents {
      padding: 30px 63px 56px 63px;
      box-sizing: border-box;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 26px;
      }
      .name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1b1b1b;
        margin-left: 20px;
        margin-top: 12px;
      }
      .info-wrap {
        .flex-one {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1b1b1b;
        }
      }
      .title2 {
        margin-top: 30px;
        margin-bottom: 10px;
      }
    }
  }
}
.el-progress {
  margin-top: 10px;
  width: 265px;
  .el-progress-bar {
    padding-right: 0;
  }
}
</style>
